<template>
  <div class="wrap">
    <img src="../../static/img/header-logo.jpg"
         alt="header-logo.jpg">
    <img src="../../static/img/school-picture.jpg"
         alt="school-picture.jpg">
    <div class="stu-reg">
      <p id="title">河南科技学院欢迎您!</p>
      <group>
        <x-input text-align="center"
                 v-model="value"
                 :show-clear="false"
                 placeholder="请输入您的身份证号码"
                 style="border: 1px solid #aaa; border-radius: 2px; margin-bottom:1.2em">
          <icon slot="right"
                :type="isShowIcon"
                @click.native="showIcon"></icon>
        </x-input>
      </group>
      <x-button type="primary"
                id="reg-but"
                @click.native="register">电子注册</x-button>
    </div>
    <div class="join">
      <p style="font-size:15px">三月软件，大学生自己的团队，一群IT时代的精英</p>
      <grid>
        <grid-item label="三月软件公众号"
                   class="chat-img">
          <img slot="icon"
               src="../../static/img/wx-code.png"
               alt="weChat">
        </grid-item>
        <grid-item label="三月软件QQ招新群"
                   class="chat-img">
          <img slot="icon"
               src="../../static/img/qq_qrcode.jpg"
               alt="qqChat">
        </grid-item>
      </grid>
    </div>
    <div style="position: relative;">
      <x-button style="background: rgb(57, 147, 236); color: #fff; margin: auto; display: block;font-size:18px;letter-spacing: 2px;"
                mini
                @click.native="$router.push('/students/stuMap')">查看学校地图</x-button>
      <p class="copyright">技术支持&copy;三月软件小组</p>
    </div>
    <toast v-model="showmsg"
           type="warn">{{msg}}</toast>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      msg: "",
      isShowIcon: "",
      showmsg: false
    };
  },
  watch: {
    value(newValue) {
      this.isShowIcon = newValue == "" ? "" : "clear";
    }
  },
  methods: {
    register() {
      let _this = this;
      let params = new URLSearchParams();
      params.append("card_id", _this.value);
      this.axios({
        method: "post",
        url: "/student/show",
        params
      })
        .then(function(resp) {
          if (resp.data.code == 0) {
            //成功
            _this.$vux.loading.show({
              text: "Loading"
            });
            setTimeout(() => {
              _this.$vux.loading.hide();
            }, 300);
            window.localStorage.setItem(
              "student",
              JSON.stringify(resp.data.result)
            );
            _this.$router.push("/students/confirmInfo");
          } else if (resp.data.code == 1) {
            //失败
            _this.msg = resp.data.msg;
            _this.showmsg = true;
          } else if (resp.data.code == 3) {
            //已注册
            _this.msg = resp.data.msg;
            _this.showmsg = true;
            _this.$router.push("/students/successReg");
          }
        })
        .catch(function(error) {
          _this.msg = error;
        });
    },
    // 点击清空input框
    showIcon() {
      this.value = "";
    }
  }
};
</script>

<style scoped>
.wrap {
  /* height: calc(100vh+40px) !important; */
  background: linear-gradient(#fff, #afd0e4);
}
img {
  width: 100%;
  display: block;
}
.stu-reg {
  width: 75%;
  height: 170px;
  padding: 20px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: -27%;
  background-color: #fff;
  box-shadow: #ccc 5px 5px 70px 0;
}

#title {
  font-size: 20px;
  text-align: center;
  color: rgb(0, 160, 233);
  letter-spacing: 3px;
}

x-input {
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-bottom: 10px;
}

#reg-but {
  background-color: rgb(0, 160, 233);
}

.join {
  width: 100%;
  margin-top: 8%;
}

.join p {
  text-align: center;
  width: 100%;
}

.chat-img /deep/ .weui-grid__icon {
  width: 80px;
  height: 80px;
}

.chat-img /deep/ .weui-grid__label {
  color: #333;
  font-size: 11px;
}

.copyright {
  font-size: 11px;
  padding: 10px 0;
  text-align: center;
}
</style>


